import { defineComponent, useSlots, computed } from "vue";
import { buttonProps } from "./botton";
import "../style/button.scss";
import "../style/style.scss";
import {Props} from "./interface" 
import {useButton} from "./use-button"
import {useButtonCustomStyle} from "./button-custom"

export default defineComponent({
  props: {
    text: {
      default: "",
    },
    type: {
      default: "default",
    },
    size: {
      default: "",
    },
    plain: {
      default: false,
    },
    disabled: {
      default: false,
    },
    loading: {
      default: false,
    },
    icon: {
      default: "",
    },
    circle: {
      default: false,
    },
    dark: {
      default: false,
    },
    round: {
      default: false,
    },
    autofocus: {
      default: false,
    },
    color: {
      default: "",
    },
  },
  emits:["click"],
  setup(props: Props, { slots,emit }) {
    // 查看插槽info
    let uSlots = useSlots();

    // 拆成组合式api形式，减少页面逻辑的数据
    let {styleArr,handler} =useButton(props,emit)
    //自定义样式
    const buttonStyle = useButtonCustomStyle(props)

    return () => (
      <>
        <div >
          <button style={buttonStyle.value} class={[...styleArr.value]} onClick={(e)=>handler(e)}>
            {props.loading ? (
              <div>
       
                  {
                    // useSlots?.loading?
                    uSlots.loading ? (
                      <div>{slots.loading ? slots.loading() : ""}</div>
                    ) : (
                 
                       <div
                        class={[
                          "iconfont",
                          "icon-jiazai1",
                          'rotate',
                          "marge",
                        ]}
                      ></div>
                   
                    )
                  }
              
              </div>
            ) : (
              ""
            )}
            {/* 图标 */}
            {props.icon ? (
              <div>
                <i
                  class={[
                    "iconfont",
                    props.icon,
                    uSlots?.default ? "marge" : "",
                  ]}
                ></i>
              </div>
            ) : (
              ""
            )}
            {/* 默认内容 */}
            <span>{slots?.default ? slots?.default() : ""}</span>
          </button>
        </div>
      </>
    );
  },
});
